<template>
    <div class="apply-main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">售后申请</span>
            </template>
        </van-nav-bar>

        <div class="apply-status">
            <p>申请状态</p>
            <div class="btn-line">
                <div :class="['btn',form.refund_cate==2?'status2':'status1']" @click="tagtype(2)">申请换货</div>
                <div :class="['btn',form.refund_cate==1?'status2':'status1']" @click="tagtype(1)">退货</div>
            </div>
        </div>


        <div class="apply-content">
            <p>售后原因</p>
            <!-- <textarea cols="30" rows="10" v-model="form.reason" ></textarea> -->
            <van-field
                v-model="form.reason"
                rows="4"
                autosize
                type="textarea"
                maxlength="100"
                placeholder="请在此处详细填写售后原因..."
                show-word-limit
            />
        </div>


        <div class="aftersale-rule" @click="Jumptoagre">
            <p>售后规则说明 <img class="aftersale-rule-jump" src="../../assets/img/editaddress-arrow-left.png" alt=""></p>
        </div>


        <img class="submitBTN" :src="canSub?subact:subdeact" @click="submitform" alt="">
    </div>
</template>
<script>
import {_ajaxrefund} from '../../service/order'
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            subact:require('../../assets/img/submitactive.png'),
            subdeact:require('../../assets/img/submit.png'),
            canSub:false,

            form:{
                refund_cate:2,
                reason:""
            },
        }
    },
    computed:{
        reason(){
            return this.form.reason
        }
    },
    watch:{
        reason(){
            if(this.form.reason.length>0){
                this.canSub=true
            }
        }
    },
    mounted(){
        
    }, 
    methods:{
        Jumptoagre(){
			this.$router.push({path:"/reg/UserAgreement",query:{id:3}})
		},
        onClickLeft(){
            this.$router.go(-1)
        },
        tagtype(num){
            this.form.refund_cate=num
        },
        submitform(){
            let _this=this
            let oid=this.$route.query.oid
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
            })

            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _ajaxrefund({
                order_id:oid,
                user_id:uid,
                refund_cate:_this.form.refund_cate,
                reason:_this.form.reason
            }).then(res=>{
                console.log(res)
                setTimeout(()=>{
                    _this.$toast.clear()
                    _this.$toast(res.message)
                    _this.$router.push("/own")
                },1000)
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.apply-main{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #f8f8f8;
    .hometitle{
        font-size: 18px;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }

    .apply-status{
        width: 100%;
        height: 85px;
        padding: 15px;
        margin: 10px 0;
        box-shadow: 3px 3px 5px rgba(237, 236, 236, .59);
        background-color: #fff;
        p{
            .font-SC();
            font-weight: bold;
            font-size: 15px;
            color: #333;
            margin-bottom: 0;
        }
        .btn-line{
            width: 100%;
            height: 20px;
            margin-top: 10px;
            .btn{
                width: 60px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                border: 1px solid #ccc;
                border-radius: 4px;
                .font-SC();
                font-size: 12px;
                float: right;
                margin-left: 20px;
            }
            .status1{
                color: #999;
                background-color: #fff;
            }
            .status2{
                color: #fff;
                background-color: #000;
            }
        }
        
    }



    .apply-content{
        width: 100%;
        height: 203px;
        background-color: #fff;
        padding: 15px;
        box-shadow: 3px 3px 5px rgba(237, 236, 236, .59);
        p{
            .font-SC();
            font-weight: bold;
            font-size: 15px;
            color: #333;
            margin-bottom: 0;
        }
        textarea{
            width: 100%;
            height: 141px;
            margin-top: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            .font-SC();
            font-size: 15px;
            color: #333;
            padding: 11px;
        }
        /deep/.van-field{
            height: 141px;
            border: 1px solid #efefef;
            margin-top: 10px;
            border-radius: 5px;
        }
        /deep/.van-field__control{
            .font-SC();
            font-size: 15px;
            color: #333;
        }
        /deep/.van-field__word-limit{
            font-family: "DINPro Medium";
            color: #ccc;
        }
    }



    .aftersale-rule{
        width: 100%;
        height: 47px;
        padding: 15px;
        margin: 10px 0 0 0;
        box-shadow: 3px 3px 20px rgba(153, 153, 153, .3);
        background-color: #fff; 
        p{
            .font-SC();
            font-weight: bold;
            font-size: 15px;
            color: #333;
            margin-bottom: 0;
            .aftersale-rule-jump{
                width: 9px;
                float: right;
            }
        }
        
    }


    .submitBTN{
        width: 346px;
        margin: 220px auto 0 auto;
        display: flex;
    }
}
</style>